<template>
    <el-card class="box-card scroll-item"  shadow="always">
        <div slot="header" class="d-flex align-items-center">
            <i class="iconfont icon-link"></i>
            <span>友链</span>
            <el-button class="ml-auto" style="float: right; padding: 3px 0" type="text">
                
                <nuxt-link 
                to="/link"
                exact>
                互换友链
            </nuxt-link>
            </el-button>
        </div>
        <div class="text item">
            <el-link v-for="item in links" :key="item.id" target='_blank' :underline="false" :href="item.href">
                {{ item.name }}</el-link>
        </div>
    </el-card>
</template>

<script>
export default {
    name: 'FriendDom',
    props: {
        links: {
            type: Array,
            required: true
        }
    },
    data() {
        return {
            
        }
    }
}
</script>
<style lang="less" scoped>
.box-card {
    i {
        font-size: 20px;
        color: #e13455;
        font-weight: bold;
    }

    span {
        font-weight: bold;
    }

    .item {
        width: 100%;

        .el-link {
            width: 50%;
            display: inline-block;
            text-align: center;
        }

    }

}
</style>